<template>
  <div class="body-content">
    <div style="width:220px;float:left;">
      <FormMenuTree v-model:value="params.parentId"/>
    </div>
    <div style="width:calc(100% - 230px);float:left;">
      <PageTable ref="defaultTable"
                 action="/user-center/menu/findPage"
                 :params="params"
                 :columns="columns">
      </PageTable>
    </div>

  </div>
</template>
<script lang="ts" setup>

// @ts-ignore
import {getCurrentInstance, ref, watch} from "vue";
// @ts-ignore
const {proxy} = getCurrentInstance()
// @ts-ignore
import {markRaw} from 'vue'
// @ts-ignore
import {ElMessageBox} from 'element-plus'
// @ts-ignore
import {Delete} from '@element-plus/icons-vue'

// pagetable
const defaultTable = ref<any>(null);
const params=ref<any>({parentId:null});
const columns: any = [{
  title: '菜单名称',
  field: 'name',
  select: true
}, {
  title: '路径',
  field: 'path'
},
  {
    title: '上级菜单',
    field: 'parentId',
    formatter: {
      type: 'other',
      action: "/user-center/menu/findOne",
      name: 'name'
    }
  },
  {
    title: '图标',
    field: 'icon'
  },
  {
    title: '操作',
    field: 'opt',
    width: 150,
    align: 'center',
    headerAlign: 'center',
    formatter: {
      type: 'opt'
    }
  },
];

/**
 *
 * @param active 执行的动作(edit,view,delete)
 */
function optColumnEvent(active: string, row: any) {
  switch (active) {
    case 'add': {
      proxy.$Modal.edit({
        title: '新增',
        comps: 'MenuEdit',
        params: row,
        parentContext: proxy
      });
      break;
    }
    case 'edit': {
      proxy.$Modal.edit({
        title: '新增',
        comps: 'MenuEdit',
        params: row,
        parentContext: proxy
      });
      break;
    }
    case 'view': {
      proxy.$Modal.show({
        title: '新增',
        comps: 'MenuEdit',
        params: row
      });
      break;
    }
    case 'delete': {
      ElMessageBox.confirm(
          '您确定删除这条数据吗?',
          'Warning',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error',
            draggable: true,
            icon: markRaw(Delete),
          }
      ).then(() => {
        // @ts-ignore
        defaultTable.value.deleteTable('/user-center/menu/delete', row.id);
      })
      break;
    }
  }
}
//监听变化
watch(() => params.value.parentId, () => {
  // @ts-ignore
  defaultTable.value.reloadTable({});
})
defineExpose({
  optColumnEvent
});
</script>
